<template>
  <div id="main" @dblclick="back" style="width: 100%; height: 750px"></div>
</template>

<script setup>
import axios from "axios";
import { provinceMap } from "@/utils/provincemap.js";
import { cityMap } from "@/utils/citymap.js";
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const chart = ref(null);
const special = ["北京", "天津", "上海", "重庆", "香港", "澳门"];
let mapdata = [];
let backMap = [];
let backMapName = [];
let option = {
  backgroundColor: '#000',
  title: {
    text: 'Echarts中国地图下钻',
    left: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 16,
      fontWeight:'normal',
      fontFamily:'Microsoft Yahei'
    }
  },
  animationDuration: 1000,
  // geo: {
  //   map: this.seriesMapProp,
  //   roam: false,
  //   show: true,
  //   itemStyle: {
  //     areaColor: this.mapBgColorProp,
  //     borderWidth: 1,
  //     borderColor: "rgba(34,93,165,1)",
  //   },
  //   silent: true, //禁用地图hover事件
  //   tooltip: {
  //     show: false,
  //   },
  //   emphasis: {
  //     itemStyle: {
  //       areaColor: this.mapBgEmColorProp,
  //       borderWidth: 1,
  //       borderColor: "rgba(34,93,165,1)",
  //     },
  //   },
  //   regions: [
  //     {
  //       name: this.$store.state.highlightCityNameNow,
  //       itemStyle: {
  //         normal: {
  //           areaColor: this.mapBgEmColorProp,
  //           borderWidth: 1,
  //           borderColor: "rgba(34,93,165,1)",
  //         },
  //       },
  //     },
  //   ],
  //   zlevel: 3,
  // },
  tooltip: {
    trigger: "item",
    showDelay: 0,
    transitionDuration: 0.2,
  },
  // visualMap: this.visualMapProp,
  toolbox: {
    show: false,
    //orient: 'vertical',
    left: "left",
    top: "top",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {},
    },
  },
};
const renderMap = (map,data) => {
  option.series = [
    {
      name: map,
      type: "map",
      mapType: map,
      roam: false,
      nameMap:{
        'china':'中国'
      },
      // silent: true, //禁用地图hover事件
      // selectedMode: false,//禁用地图点击事件
      label:{
        show:true,
        textStyle:{
          color:'#999',
          fontSize:13
        }
      },
      itemStyle:{
        areaColor:'#434c48',
        borderColor:'dodgerblue'
      },
      emphasis: {
        label: {
          show: true,
          textStyle:{
            color:'#fff',
            fontSize:13
          }
        },
        itemStyle:{
          areaColor:'darkorange',
        },
      },
      z: 2,
      zlevel: 2,
      data: data,
      animationDuration: 0,
    },
  ];
  chart.value.setOption(option)
}
const loadChina = async () => {
  let { data } = await axios.get("/json/china.json");
  data.features.forEach((element) => {
    mapdata.push({
      name: element.properties.name,
    });
  });
  echarts.registerMap("china", data);
  renderMap("china", mapdata);
};
const back = () => {
  if (backMapName.length>0) {
    renderMap(backMapName[0], mapdata);
    backMapName.pop();
    backMap.pop();
  }else{
    renderMap("china", mapdata);
  }
}
onMounted(() => {
  chart.value = echarts.init(document.querySelector("#main"));
  chart.value.on('dblclick',()=>{
    
  });
  chart.value.on('click',async (params)=>{
    if(params.name in provinceMap){
      // 省
      let {data} = await axios.get("/json/provinces/"+provinceMap[params.name]+".json");
      echarts.registerMap(params.name, data);
      data.features.forEach((element) => {
        mapdata.push({
          name: element.properties.name,
        });
      });
      backMapName.push(params.name);
      backMap.push(data)
      renderMap(params.name, mapdata);
    }else if (params.seriesName in provinceMap) {
      if (special.indexOf(params.seriesName)>=0) {
        // 
      }else{
        if (cityMap[params.name]!==undefined) {
          // 市
          let {data} = await axios.get("/json/cities/"+cityMap[params.name]+".json");
          echarts.registerMap(params.name, data);
          data.features.forEach((element) => {
            mapdata.push({
              name: element.properties.name,
            });
          });
          // backMap.push(cityMap[params.name]);
          renderMap(params.name, mapdata);
        }
        
      }
    }else{
      // 
    }
  });
  loadChina();
});
</script>
